import React, { memo, useEffect } from "react";
import { useSelector, shallowEqual, useDispatch, } from "react-redux";
import './css.scss'
import { useHistory } from 'react-router-dom';
import { getDetailsAction, getArtiList, getReport, getLook } from "./store/actionCreators";
import RechTitle from '../../components/RechTitle'
import uploadImg from '../../assets/img/shangchuan.png'
import download from '../../assets/img/xiazai.png'
import TitleMore from '../../components/TitleMore'
import ArList from '../../components/ArList'
import LookList from '../../components/LookList'
import ReportList from '../../components/ReportList'
import Search from './components/Certificate'
import ContactUs from './components/ContactUs'
import { BASE_URL } from '../../services/config'
export default memo(function App() {
    let history = useHistory();
    const { details, artiList, reportList, lookLists } = useSelector(
        (state) => ({
            details: state.getIn(["home", "details"]),
            artiList: state.getIn(["home", "artiList"]),
            reportList: state.getIn(["home", "reportList"]),
            lookLists: state.getIn(["home", "lookList"]),
        }),
        shallowEqual
    );

    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(getDetailsAction());
        dispatch(getArtiList({
            page: 1,
            pageSize: 12,
        }));
        dispatch(getReport({
            category: 10,
            page: 1,
            pageSize: 12,
        }));
        dispatch(getLook({
            category: 11,
            page: 1,
            pageSize: 12,
        }));
    }, [dispatch]);
    const handDownload = () => {
        window.open(BASE_URL + '/download/file?fileId=' + details.fileId)
        // downloadFile(details.fileId).then(res => {
        //     window.open(BASE_URL + '/download/file?fileId=' + details.fileId)
        // })
    }
    const handUpload = () => {
        history.push('/upload');
    }
    return (
        <div className='w home_box'>
            <div style={{ marginBottom: "60px" }}>
                <RechTitle title='大赛详情' isImgOrVideo={details.contestFileId} content={details.contestText} videoUrl={details.contestVideoUrl ? details.contestVideoUrl : ''}></RechTitle>
            </div>
            <div style={{ marginBottom: "60px" }}>
                <RechTitle title='大赛进度' content={details.contestSchedule}></RechTitle>
            </div>
            <div className='contrent_box w'>
                <div className='left'>
                    <div style={{ marginBottom: "60px" }}>
                        <RechTitle title='奖项说明' content={details.awardDescription}></RechTitle>
                    </div>
                    <div style={{ marginBottom: "60px" }}>
                        <RechTitle title='大赛申报流程' content={details.contestProcess}></RechTitle>
                        <div className='du_imgs'>
                            <img onClick={e => handDownload()} src={download} alt='下载' />
                            <img onClick={e => handUpload()} src={uploadImg} alt='上传' />
                        </div>
                    </div>
                    <div style={{ marginBottom: "60px" }}>
                        <TitleMore isMore={true} moreUrl='/worksList' title='评委介绍'></TitleMore>
                        <ArList list={artiList.list ? artiList.list : []}></ArList>
                    </div>
                    <div style={{ marginBottom: "60px" }}>
                        <TitleMore isMore={true} moreUrl='/reportList' title='大赛报道'></TitleMore>
                        <ReportList list={reportList.list}></ReportList>
                    </div>
                </div>
                <div className='right'>
                    <div style={{ marginBottom: '60px' }}>
                        <Search></Search>
                    </div>
                    <ContactUs list={details.rightContent}></ContactUs>
                </div>

            </div>
            <div>
                <TitleMore isMore={true} moreUrl='/lookList' title='往届精彩回顾'></TitleMore>
                <div>
                    <LookList list={lookLists.list ? lookLists.list : []}></LookList>
                </div>
            </div>
        </div>
    );
});
